<% user = user || @user # allow overriding w/ local variable %>

<% if @node %>
  <!-- listing of posts in response to this one -->
  <%= render partial: 'tag/replication' %>
  <!-- This is the sidebar tagging display, also renders Subscribe button for multiple subscription -->
  <p style="font-size:0.9em;color:#666;margin-top:5px;">
    <% if @node.normal_tags.count > 0 %>
       <%= translation('tag._tagging.part_of') %>
    <% end %>
  </p>
  <div id="tags" class="node-tags">
    <%= render partial: 'tag/tags', locals: { power_tag: false, badge_name: 'badge-secondary', tags: @node.normal_tags(:followers).includes(:tag) } %>
    <%= render partial: 'tag/tags', locals: { power_tag: true, badge_name: 'badge-primary', tags: @node.power_tag_objects.includes(:tag) } %>
  </div>
<% else %>
  <div id="tags" class="profile-tags">
    <%= render partial: 'tag/tags', locals: { power_tag: false, badge_name: 'badge-primary', tags: user.user_tags, user: user } %>
  </div>
<% end %>

<% if @preview %><div class="alert alert-info"><%= raw translation('notes.show.preview_topics') %></div><% end %>

<script>
$(function () {
  $('#tags [data-toggle="tooltip"]').tooltip();

  var pops = $("[data-toggle=popover]");
  $(".label").on("click", function(e){
    if(e.target === this){
      let that = this;
      if(this.dataset.count == 0){
        setTimeout(function(){
          $(that).popover("show");
        }, 0);
        this.dataset.count = 1;
      } else {
        setTimeout(function(){
          $(that).popover("hide");
        }, 0);
        this.dataset.count = 0;
      }
    }
  });
});
</script>

<% parent ||= nil %>

<% if current_user && (parent != :profile || (current_user.id == user.id || logged_in_as(['admin']))) && !@preview  %>
  <% if current_user.first_time_poster && !(parent == :profile || current_user.username == @node.author.username || ( @node.coauthors && @node.coauthors.exists?(username: current_user.username)) || logged_in_as(['admin', 'moderator'])) %>
    <a data-toggle="popover" data-content="Adding tags to other people’s posts is not available to you until your own first post has been approved by site moderators" class="btn btn-circle btn-circle-sm" data-placement="top" style="float:left; cursor: not-allowed;">
      <i class="fa fa-plus" style="color:#808080;"></i>
    </a>
    
  <% else %>
    <a data-toggle="tooltip" title="Add tags/View all" aria-label="Add tags/View all" id="tags-open" class="btn btn-circle btn-circle-sm tags-open" style="float:left;">
      <i class="fa fa-plus" style="color:#808080;"></i>
    </a>

    <% if @node && @node.tags.count == 0 && !@preview %>
      <span style="float:left;color:#666;margin-top:14px;margin-left:5px;">Add tags</span>
    <% end %>

    <%= render partial: 'tag/form', locals: { node: @node ||= nil, user: user ||= nil, url: url ||= nil } %>
  <% end %>
<% end %>

<script>
  $("#tags-open, .show-more-tags").click(function(){ 
    $("#tagform").show();
    $("#tags-open").hide();
    $('.more-tags').show();
    $('.show-more-tags').hide();
    $(".tag-input").focus();
  });
</script>

<style>
  #tagform {
    display:none;
  }
  .list-inline {
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<%= render partial: 'tag/location' %>
